<template>
    <view class="page_main">
        <HeaderBar title="订单完成"></HeaderBar>
        <view class="content">
            <view class="container">
                <i class="iconfont icon-chenggong"></i>
                <view class="text">
                    <view class="title">提交成功</view>
                    <view class="tips">客服会在第一时间联系您</view>
                </view>  
            </view>
            <view class="steps">
                <wd-steps :active="activeStep" align-center>
                    <wd-step
                        v-for="(item, index) in stepsList"
                        :key="index"
                        :title="item.title"
                        :icon="index === stepsList.length - 1 ? 'check-circle-filled' : ''"
                    />
                </wd-steps>
            </view>
            <view class="imgList">
                <img class="img" v-for="(item,index) in imageList" :key="index" :src="item.imgUrl">
            </view>
            <view class="btns">
                <button class="btn">查看订单</button>
                <button class="btn" @click="pageBack">返回定制</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import HeaderBar from "@/components/HeaderBar/index.vue";
import { ref, onMounted } from "vue";
import {styleSettingContent} from "@/api/system";

const activeStep = ref(3);
const stepsList = ref([
  { title: '提交需求' },
  { title: '设计行程' },
  { title: '签约付款' },
  { title: '轻松出行' },
]);
const imageList = ref([]);
onMounted(() => {
	getBanner();
});
//获取定制路线-订单状态img
const getBanner =async()=>{
	try{
		const res = await styleSettingContent({codes:"CUSTOMIZED_ORDER_IMG"})
		const { CUSTOMIZED_ORDER_IMG } = res.result
		imageList.value = CUSTOMIZED_ORDER_IMG
	}catch(error){
	}finally{}
  }
const pageBack =()=>{
    uni.reLaunch({
        url: '/premiumRouteSubPack/pages/customizedRoute/index' 
    });
}
</script>

<style lang="scss" scoped>
.page_main{
    min-height: 100vh;
	background: #EEEFE7;
}
:deep(.header){
	height: 62rpx;
	padding:13% 0 30rpx;
	background: none;
	.wd-navbar__title{
		line-height: 62rpx;
		font-weight: normal;
		font-size: 33rpx;
		color: #2b2b24;
	}
}
.content{
    padding: 0 28rpx;
    .container{
        padding-top: 145rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon-chenggong{
            font-size: 80rpx;
            color: #1b9c61;
            margin-right: 26rpx;
        }
        .text{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 80rpx;
            .title{
                font-size: 40rpx;
                line-height: 40rpx;
                color: #333;
                font-weight: bold;
            }
            .tips{
                font-size: 22rpx;
                color: #777;
            }
        }
    }
    .steps{
        margin-top: 90rpx;
        :deep(.wd-step){
            .wd-step__icon{
                width: 20rpx;
                height: 20rpx;
                background: none;
                margin: 0 10rpx;
            }
            .wd-step__icon-outer{
                width: 20rpx;
                height: 20rpx;
                font-size: 0;
                background: #bbb;
                border: none;
            }
            .wd-step__line{
                background: #777;
                width: calc(100% - 10rpx);
            }
            .wd-step__icon-inner{
                margin-top: -10rpx;
            }
            .wd-step__content{
                margin-top: 20rpx;
            }
            &:last-child{
                .wd-step__content{
                    margin-top: 15rpx;
                }
            }
        }
        :deep(.is-finished){
            .wd-step__icon{
                color: #1b9c61;
                background: none;
                width: 20rpx;
                height: 20rpx;
                margin: 0 10rpx;
            }
            .wd-step__icon-outer{ 
                background: #1b9c61;
                color: #1b9c61;
            }
            .wd-step__dot{
                background: #1b9c61;
            }
            .wd-step__line{
                background: #1b9c61;
            }
            .wd-step__content{
                .wd-step__title{
                    color: #777777;
                }
            }
        }
        :deep(.is-process){
            .wd-step__icon-outer{ 
                background: #1b9c61;
                color: #1b9c61;
            }
            .wd-step__icon-inner{
                &::before{
                    color: #1b9c61;
                }
            }
            .wd-step__content{
                .wd-step__title{
                    color: #777777;
                }
            }
        }
    }
    .imgList{
        margin-top: 120rpx;
        .img{
            width: 100%;
            height: 245rpx;
            border-radius: 10rpx;
            margin-bottom: 20rpx;
        }
    }
    .btns{
        margin-top: 147rpx;
        display: flex;
        align-items: center;
        .btn{
            flex: 1;
            height: 91rpx;
            color: #1b9c61;
            border-radius: 10rpx;
            border: 1rpx solid #1b9c61;
            font-size: 32rpx;
            font-weight: bold;
            &:nth-child(2){
                margin-left: 20rpx;
            }
        }
    }
}
</style>